import React from "react";
import "./index.css";
import GxlTableRowCell from "./Cell";
import ReactDOM from 'react-dom';
import { observer, inject } from "mobx-react";
@inject("sheetStore")
@observer
class GxlTableRow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      left:0,
      top:0
    };
  }
  componentDidMount() {
    var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
    this.setState({
      left: rect.left,
      top: rect.top,
    });
  }
  buildCells(sheet,row, cols) {
    let i = 0;
    const array = [];
    for (; i < cols; i++) {
      array.push(
        <GxlTableRowCell key={`row_${row}_col_${i}`} rowLeft={this.state.left} rowTop={this.state.top} sheet={sheet} row={row} cell={i} />
      );
    }
    return array;
  }
  render() {
    const {left,top} = this.state;
    const {row,sheet,cols,tableTop,sheetStore,style} = this.props;
    const currentSheet = sheetStore.getCurrentSheet();
    const _style = {}
    if (currentSheet.fixedRowIndex && row <= currentSheet.fixedRowIndex) {
      _style.position='sticky'
      _style.left = 0
      _style.top = top-tableTop
      _style.zIndex=3
      if(row==currentSheet.fixedRowIndex){
        _style.boxShadow="0px 2px 0px 0px #999"
      }
    }
    return (
      <div className="gxl-table-row" style={{...style,..._style}}>
        {this.buildCells(sheet,row, cols)}
      </div>
    );
  }
}
export default GxlTableRow;
